<template>
  <div>
    <!-- 搜索栏 -->
    <search-bar :options="searchBarOptions" style="padding-top:0;" />

    <!--分割线-->
    <!-- <div class="line"></div> -->
    <div class="box-total">
      <div class="card" v-if="userType == 1">
        <div class="title_medium">{{ $t('m.platformProfit') }}</div>
        <div class="titl_large">
          {{ total.platformProfit | amountFormat }}
        </div>
      </div>
      <div
        class="card"
        v-if="(agentLevel == 1 && userType == 2) || userType == 1"
      >
        <div class="title_medium">{{ $t('m.First_franchisee_profit') }}</div>
        <div class="titl_large">
          {{ total.agency1Profit | amountFormat }}
        </div>
      </div>
      <div class="card">
        <div class="title_medium">{{ $t('m.Second_franchisee_profit') }}</div>
        <div class="titl_large">
          {{ total.agency2Profit | amountFormat }}
        </div>
      </div>
      <div class="card">
        <div class="title_medium">{{ $t('m.Merchant_profit') }}</div>
        <div class="titl_large">
          {{ total.businessProfit | amountFormat }}
        </div>
      </div>
    </div>

    <!-- 表格栏 -->
    <div class="table-box">
      <!--表格-->
      <fast-table :options="fastTableOptions" :data="page.records" />
      <!-- 分页 -->
      <pagination
        :total="page.total"
        :current="page.current"
        :size="page.size"
        @changePageSize="changePageSize"
        @changePageNum="changePageNum"
      />
    </div>
  </div>
</template>
<script>
import page from '@/mixins/page'
import FastTable from '@/components/fast-table.vue'
import SearchBar from '@/components/search-bar.vue'
import Pagination from '@/components/pagination.vue'

export default {
  components: { Pagination, SearchBar, FastTable },
  mixins: [page],
  data () {
    return {
      total: {
        agency1Profit: 0, // 一级代理商分成
        agency2Profit: 0, // 二级代理商分成
        businessProfit: 0, // 商家分成
        currency: 0, // 货币
        platformProfit: 0 // 平台利润
      },

      fastTableOptions: {
        columns: [
          {
            label: this.$t('m.Payment_date'),
            prop: 'payTime',
            formatter: row => this.$format.dateformat(row.payTime)
          },
          {
            label: this.$t('m.Order_List_OrderID'),
            prop: 'orderNo'
          },
          {
            label: this.$t('m.User_ID'),
            prop: 'ucode',
            formatter: row => this.$format.strFormat(row.ucode)
          },
          {
            label: this.$t('m.Order_List_OrderStatus'),
            prop: 'state',
            formatter: row =>
              this.$format.stateFormat(row.state, this.$dict.order.state)
          },
          {
            label: this.$t('m.orderRevenue'),
            prop: 'orderRevenue',
            formatter: row => this.$format.amountFormat(row.orderRevenue)
          },
          {
            showcolumn: this.getUserType() == 2,
            label: this.$t('m.platformProfit'),
            prop: 'platformAmount',
            formatter: row => this.$format.amountFormat(row.platformAmount)
          },
          {
            showcolumn: this.getUserType() == 2 && this.getAgentLevel() == 2,
            label: this.$t('m.First_franchisee_profit'),
            prop: 'agent1Amount',
            formatter: row => this.$format.amountFormat(row.agent1Amount)
          },
          {
            label: this.$t('m.Second_franchisee_profit'),
            prop: 'agent2Amount',
            formatter: row => this.$format.amountFormat(row.agent2Amount)
          },
          {
            label: this.$t('m.Merchant_profit'),
            prop: 'businessAmount',
            formatter: row => this.$format.amountFormat(row.businessAmount)
          }
        ]
      },
      userType: this.getUserType(), //用户类型
      agentLevel: this.getAgentLevel() //代理商等级
    }
  },
  created () {
    this.getSearchBar()
    this.getPage()
  },
  methods: {
    getSearchBar () {
      this.searchBarOptions = {
        search: this.search,
        bars: [
          {
            value: '',
            type: 'input',
            prop: 'search',
            placeholder: this.$t('m.Order_List_OrderID')
          },
          {
            value: '',
            type: 'datePicker',
            prop: 'rangeTime',
            label: this.$t('m.Payment_date')
          }
        ]
      }
    },
    getTotal () {
      this.$api.brokerage.getTotalPlatformProfit(this.params).then(res => {
        if (this.$ok(res)) {
          this.total = res.data
        }
      })
    },
    getPage () {
      this.getTotal()
      this.$api.brokerage.getPagePlatformProfit(this.params, this.page).then(res => {
        if (this.$ok(res)) {
          this.page = res.data
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.container {
  .box-total {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 8px 20px 0 20px;

    .card {
      min-width: 220px;
      background: #ffffff;
      border: 1px solid #d2d8e2;
      border-radius: 6px;
      padding: 20px 24px;
      margin-right: 20px;

      .title_medium {
        font-size: 14px;
        text-align: left;
        color: #39404d;
        line-height: 20px;
        margin-bottom: 4px;
      }
      .titl_large {
        font-size: 20px;
        font-weight: 600;
        text-align: left;
        color: #39404d;
        line-height: 24px;
      }
    }
  }
}
</style>
